<template>
	<view class="header p-10px pb-20px">
		<view class="user flex flex-x-between flex-y-center">
			<view class="flex flex-y-center" @click="gotoPersonal">
				<image :src="useInfo ? useInfo.avatarUrl:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'" class="w-120px h-120px rounded"></image>
				<view class="ml-10px">
					<view class="color-white text-32px">{{useInfo.nickName}}</view>
					<view class="mt-20px color-999 text-24px">您好！</view>
				</view>
			</view>
			<view class="px-20px py-16px color-white bg-333 rounded-5px text-24px">退出</view>
		</view>

		<view class="data-view px-5px pt-10px mt-20px flex flex-wrap flex-x-between bg-white rounded-20px">
			<view class="px-35px py-10px mb-20px flex flex-y flex-x-center flex-y-center">
				<text class="color-333 text-24px">实际进账</text>
				<view class="line"></view>
				<text class='font-bold text-32px'>53820</text>
			</view>
			<view class="px-35px py-10px mb-20px flex flex-y flex-x-center flex-y-center">
				<text class="color-333 text-24px">红包发放</text>
				<view class="line"></view>
				<text class='font-bold text-32px'>53820</text>
			</view>
			<view class="px-35px py-10px mb-20px flex flex-y flex-x-center flex-y-center">
				<text class="color-333 text-24px">累计提现</text>
				<view class="line"></view>
				<text class='font-bold text-32px'>53820</text>
			</view>
			<view class="px-35px py-10px mb-20px flex flex-y flex-x-center flex-y-center">
				<text class="color-333 text-24px">账户余额</text>
				<view class="line"></view>
				<text class='font-bold text-32px'>53820</text>
			</view>
			<view class="px-35px py-10px mb-20px flex flex-y flex-x-center flex-y-center">
				<text class="color-333 text-24px">浏览数量</text>
				<view class="line"></view>
				<text class='font-bold text-32px'>53820</text>
			</view>
			<view class="px-35px py-10px mb-20px flex flex-y flex-x-center flex-y-center">
				<text class="color-333 text-24px">粉丝数量</text>
				<view class="line"></view>
				<text class='font-bold text-32px'>53820</text>
			</view>
			<view class="px-35px py-10px mb-20px flex flex-y flex-x-center flex-y-center">
				<text class="color-333 text-24px">分享数量</text>
				<view class="line"></view>
				<text class='font-bold text-32px'>53820</text>
			</view>
			<view class="px-35px py-10px mb-20px flex flex-y flex-x-center flex-y-center">
				<text class="color-333 text-24px">订单数量</text>
				<view class="line"></view>
				<text class='font-bold text-32px'>53820</text>
			</view>
		</view>
	</view>

	<view class="mt-40px">
		<view class="title">活动管理</view>
		<view class="mt-20px pt-20px icon-list flex flex-wrap  bg-white mx-20px rounded-20px">
			<view class="w-1-4 py-10px mb-20px flex flex-y flex-x-center flex-y-center rounded-5px"
				@click="gotoWithdrawMoney">
				<image src="../../static/business-icon/icon-list-01.svg" mode="" class="w-60px h-60px"></image>
				<text class="color-333 text-24px">商家提现</text>
			</view>
			<view class="w-1-4 py-10px mb-20px flex flex-y flex-x-center flex-y-center rounded-5px"
				@click="gotoDataStatistics">
				<image src="../../static/business-icon/icon-list-02.svg" mode="" class="w-60px h-60px"></image>
				<text class="color-333 text-24px">数据统计</text>
			</view>
			<view class="w-1-4 py-10px mb-20px flex flex-y flex-x-center flex-y-center rounded-5px"
				@click="gotoProductStatistics">
				<image src="../../static/business-icon/icon-list-03.svg" mode="" class="w-60px h-60px"></image>
				<text class="color-333 text-24px">商品统计</text>
			</view>
			<view class="w-1-4 py-10px mb-20px flex flex-y flex-x-center flex-y-center rounded-5px"
				@click="gotoEmployeeBonus">
				<image src="../../static/business-icon/icon-list-04.svg" mode="" class="w-60px h-60px"></image>
				<text class="color-333 text-24px">员工奖金统计</text>
			</view>
			<view class="w-1-4 py-10px mb-20px flex flex-y flex-x-center flex-y-center rounded-5px"
				@click="gotoOrderList(0)">
				<image src="../../static/business-icon/icon-list-05.svg" mode="" class="w-60px h-60px"></image>
				<text class="color-333 text-24px">已支付客户</text>
			</view>
			<view class="w-1-4 py-10px mb-20px flex flex-y flex-x-center flex-y-center rounded-5px"
				@click="gotoOrderList(1)">
				<image src="../../static/business-icon/icon-list-06.svg" mode="" class="w-60px h-60px"></image>
				<text class="color-333 text-24px">未支付客户</text>
			</view>
			<view class="w-1-4 py-10px mb-20px flex flex-y flex-x-center flex-y-center rounded-5px" @click="gotoTeamUp">
				<image src="../../static/business-icon/icon-list-07.svg" mode="" class="w-60px h-60px"></image>
				<text class="color-333 text-24px">全部组队</text>
			</view>
			<view class="w-1-4 py-10px mb-20px flex flex-y flex-x-center flex-y-center rounded-5px"
				@click="gotoRecommendedData">
				<image src="../../static/business-icon/icon-list-08.svg" mode="" class="w-60px h-60px"></image>
				<text class="color-333 text-24px">推荐数据</text>
			</view>
			<view class="w-1-4 py-10px mb-20px flex flex-y flex-x-center flex-y-center rounded-5px"
				@click="gotoCommission(0)">
				<image src="../../static/business-icon/icon-list-09.svg" mode="" class="w-60px h-60px"></image>
				<text class="color-333 text-24px">佣金数据</text>
			</view>
			<view class="w-1-4 py-10px mb-20px flex flex-y flex-x-center flex-y-center rounded-5px"
				@click="gotoCommission(1)">
				<image src="../../static/business-icon/icon-list-010.svg" mode="" class="w-60px h-60px"></image>
				<text class="color-333 text-24px">溯源奖金记录</text>
			</view>
			<view class="w-1-4 py-10px mb-20px flex flex-y flex-x-center flex-y-center rounded-5px"
				@click="gotoExportOrder">
				<image src="../../static/business-icon/icon-list-011.svg" mode="" class="w-60px h-60px"></image>
				<text class="color-333 text-24px">订单导出</text>
			</view>
			<view class="w-1-4 py-10px mb-20px flex flex-y flex-x-center flex-y-center rounded-5px"
				@click="gotoLeadersRanking">
				<image src="../../static/business-icon/icon-list-012.svg" mode="" class="w-60px h-60px"></image>
				<text class="color-333 text-24px">团长排名</text>
			</view>
			<view class="w-1-4 py-10px mb-20px flex flex-y flex-x-center flex-y-center rounded-5px"
				@click="gotoCommission(2)">
				<image src="../../static/business-icon/icon-list-013.svg" mode="" class="w-60px h-60px"></image>
				<text class="color-333 text-24px">佣金审核</text>
			</view>
			<view class="w-1-4 py-10px mb-20px flex flex-y flex-x-center flex-y-center rounded-5px"
				@click="activeCenter">
				<image src="../../static/business-icon/icon-list-013.svg" mode="" class="w-60px h-60px"></image>
				<text class="color-333 text-24px">活动中心</text>
			</view>
		</view>
	</view>

	<view class="mt-40px">
		<view class="title">
			大屏语音报单 <text class="px-10px py-8px text-24px bg-pink color-pink rounded-10px">点击下方按钮即可复制相应的链接地址</text>
		</view>
		<view class="mt-40px flex flex-x-evenly">
			<view @click="clipboard" class="w-1-2 p-20px mx-20px bg-white rounded-50px flex flex-y-center">
				<view class="mr-20px">
					<image src="../../static/business-icon/icon-pc.svg" mode="" class="w-50px h-50px"></image>
				</view>
				<text>PC大屏</text>
			</view>
			<view @click="gotoMobilScreen" class="w-1-2 p-20px mx-20px bg-white rounded-50px flex flex-y-center">
				<view class="mr-20px">
					<image src="../../static/business-icon/icon-phone.svg" mode="" class="w-50px h-50px"></image>
				</view>
				<text>手机投屏</text>
			</view>
		</view>
	</view>

	<view class="py-40px">
		<view class="title">
			系统设置
		</view>
		<view class="mt-20px pt-20px icon-list flex flex-wrap flex-x-between bg-white mx-20px rounded-20px">
			<view class="px-30px py-10px mb-20px flex flex-y flex-x-center flex-y-center rounded-5px"
				@click="gotoEmployeeManage">
				<image src="../../static/business-icon/icon-setting-yuangongshezhi.svg" mode=""
					class="w-40px h-40px mb-20px"></image>
				<text class="color-333 text-24px">员工管理</text>
			</view>
			<view class="px-30px py-10px mb-20px flex flex-y flex-x-center flex-y-center rounded-5px"
				@click="gotoGrouping">
				<image src="../../static/business-icon/icon-setting-fenzu.svg" mode="" class="w-40px h-40px mb-20px">
				</image>
				<text class="color-333 text-24px">分组设置</text>
			</view>
			<view class="px-30px py-10px mb-20px flex flex-y flex-x-center flex-y-center rounded-5px"
				@click="gotoActivitySettings">
				<image src="../../static/business-icon/icon-setting-huodong.svg" mode="" class="w-40px h-40px mb-20px">
				</image>
				<text class="color-333 text-24px">活动设置</text>
			</view>
			<view class="px-30px py-10px mb-20px flex flex-y flex-x-center flex-y-center rounded-5px"
				@click="addEmployee">
				<image src="../../static/business-icon/icon-setting-erweima.svg" mode="" class="w-40px h-40px mb-20px">
				</image>
				<text class="color-333 text-24px">员工申请二维码</text>
			</view>
			<view class="px-30px py-10px mb-20px flex flex-y flex-x-center flex-y-center rounded-5px"
				@click="gotoPermissionSettings">
				<image src="../../static/business-icon/icon-setting-quanxianpeizhi.svg" mode=""
					class="w-40px h-40px mb-20px"></image>
				<text class="color-333 text-24px">权限设置</text>
			</view>
		</view>
	</view>
</template>

<script setup name="Index">
	import {
		setClipboard,
		getClipboard
	} from '@/utils/util';
	import {
		ref,
	} from 'vue'
	const clipboard = () => {
		setClipboard('要复制的文本222333');
	}
	let useInfo = ref(uni.getStorageSync('userInfo'))

	// 跳转手机投屏
	const gotoMobilScreen = () => {
		uni.$uv.route({
			url: '/pagesPoster/MobilScreen/MobilScreen' // 跳转活动分包
		})
	}

	// 跳转商家提现
	const gotoWithdrawMoney = () => {
		uni.$uv.route({
			url: '/pages/WithdrawMoney/WithdrawMoney'
		})
	}

	// 跳转数据统计
	const gotoDataStatistics = () => {
		uni.$uv.route({
			url: '/pages/DataStatistics/DataStatistics'
		})
	}

	// 跳转商品统计
	const gotoProductStatistics = () => {
		uni.$uv.route({
			url: '/pages/ProductStatistics/ProductStatistics'
		})
	}

	// 跳转团长排名
	const gotoLeadersRanking = () => {
		uni.$uv.route({
			url: '/pages/LeadersRanking/LeadersRanking'
		})
	}
	// 活动中心
	const activeCenter = () => {
		uni.$uv.route({
			url: '/pages/ActivityCenter/ActivityCenter'
		})
	}
	

	// 员工奖金统计
	const gotoEmployeeBonus = () => {
		uni.$uv.route({
			url: '/pages/EmployeeBonus/EmployeeBonus'
		})
	}

	// 已支付、未支付订单
	const gotoOrderList = (pageType) => {
		uni.$uv.route({
			url: '/pages/OrderList/OrderList',
			params: {
				pageType
			}
		})
	}

	// 佣金数据
	const gotoCommission = (pageType) => {
		uni.$uv.route({
			url: '/pages/Commission/Commission',
			params: {
				pageType
			}
		})
	}

	// 推荐数据
	const gotoRecommendedData = () => {
		uni.$uv.route({
			url: '/pages/RecommendedData/RecommendedData',
		})
	}

	// 订单导出
	const gotoExportOrder = () => {
		uni.$uv.route({
			url: '/pages/ExportOrder/ExportOrder',
		})
	}

	// 全部组队
	const gotoTeamUp = () => {
		uni.$uv.route({
			url: '/pages/TeamUp/TeamUp',
		})
	}

	// 设置中心
	// 员工管理
	const gotoEmployeeManage = () => {
		uni.$uv.route({
			url: '/pages/EmployeeManage/EmployeeManage',
		})
	}

	// 分组设置
	const gotoGrouping = () => {
		uni.$uv.route({
			url: '/pages/Grouping/Grouping',
		})
	}

	// 活动设置
	const gotoActivitySettings = () => {
		uni.$uv.route({
			url: '/pages/ActivitySettings/ActivitySettings',
		})
	}

	// 员工申请二维码
	const addEmployee = () => {
		uni.$uv.route({
			url: '/pages/AddEmployee/AddEmployee',
		})
	}

	// 权限设置
	const gotoPermissionSettings = () => {
		uni.$uv.route({
			url: '/pages/PermissionSettings/PermissionSettings',
		})
	}

	// 个人中心
	const gotoPersonal = () => {
		uni.$uv.route({
			url: '/pages/Personal/Personal',
		})
	}
</script>

<style lang="scss">
	page {
		background: rgb(244, 243, 248);
	}

	.header {
		background: rgb(37, 67, 140);
		border-radius: 0px 0px 10rpx 10rpx;
	}

	.title {
		padding-left: 20rpx;
		font-size: 32rpx;
	}

	.line {
		width: 10rpx;
		height: 10rpx;
		margin: 5rpx 0 2rpx;
		border-radius: 50px;
		background: #e1eee1;
	}
</style>